<template>
  <div class="home">
    <div class="contanier">
      <banner />
      <!-- 最近更新 -->
      <div class="recently-updated">
        <platehead
          icon="update"
          title="最近更新"
          :rightMenu="true"
          @handleToLast="handleToLastUpdate"
          @handleToNext="handleToNextUpdate"
        />
        <el-row :gutter="35" type="flex" justify="space-between">
          <el-col :span="19">
            <el-row :gutter="35">
              <el-col :span="12" v-for="(item, index) in updateList" :key="index">
                <card :dataList="item" />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="5">
            <normalLeader :dataList="updateLeaderList" :libOption="{updateDay:3}" />
          </el-col>
        </el-row>
      </div>
      <!-- 完本小说 -->
      <div class="finish-book">
        <platehead
          icon="finish_book"
          title="完本小说"
          :rightMenu="true"
          @handleToLast="handleToLastOver"
          @handleToNext="handleToNextOver"
        />
        <el-row
          :gutter="35"
          type="flex"
          justify="space-between"
          v-loading="overLoading"
        >
          <el-col :span="19">
            <detailcard :dataList="overListTop" style="margin-bottom:20px;" />
            <bigcard :dataList="overListOther" title="当前热门" info="完本" cardHeight="490" />
          </el-col>
          <el-col :span="5">
            <normalLeader :dataList="overList" :libOption="{isOver:2}" />
          </el-col>
        </el-row>
      </div>
      <!-- 分类推荐 -->
      <div class="classification">
        <platehead icon="sort" title="分类推荐" :rightMenu="false"/>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in typeList" :key="index">
            <leaderboard :dataList="item"/>
          </el-col>
        </el-row>
      </div>
      <!-- 点击排行 -->
      <div class="click-leader">
        <platehead icon="leader" title="点击排行" :rightMenu="false"/>
        <el-row :gutter="20">
          <el-col :span="6">
            <bannercard :dataList="clickListTop" />
          </el-col>
          <el-col :span="18">
            <bigcard :dataList="clickList" title="排行榜" info="点击最多" cardHeight="675" />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import banner from "@/components/Banner";
import leaderboard from "@/components/Leaderboard";
import platehead from "@/components/Platehead";
import card from "@/components/Card";
import normalLeader from "@/components/NormalLeader";
import detailcard from "@/components/DetailCard";
import bigcard from "@/components/BigCard";
import bannercard from "@/components/BannerCard";
import {
  getUpdateList,
  getOverList,
  getTypeList,
  getClickList,
} from "@/api/homepage";

export default {
  name: "home",
  components: {
    banner,
    leaderboard,
    platehead,
    card,
    normalLeader,
    detailcard,
    bigcard,
    bannercard,
  },
  data() {
    return {
      updateList: [],
      updateLeaderList: [],
      overList: [],
      overListTop: [],
      overListOther: [],
      clickList: [],
      clickListTop: [],
      typeList: [],
      scrollFlag: true,
      updateLoading:true,
      overLoading:true,
      classLoading:true,
      clickLoading:true
    };
  },
  created() {
    this.getClickList();
    this.getUpdateList();
    this.getOverList();
    this.getTypeList();
  },
  methods: {
    // 获取最近更新
    getUpdateList() {
      getUpdateList({ pageSize: 9, page: 1 }).then((res) => {
        this.updateList = res.data.bookList.data.slice(0, 6);
        this.updateLeaderList = res.data.bookList.data;
        this.updateLoading = false;
      });
    },
    // 获取完本小说
    getOverList() {
      getOverList({ pageSize: 20 }).then((res) => {
        this.overList = res.data.bookList.data.slice(0, 9);
        this.overListTop = res.data.bookList.data.slice(0, 1);
        this.overListOther = res.data.bookList.data.slice(1, 19);
        this.overLoading = false;
      });
    },
    // 获取点击排行
    getClickList() {
      getClickList({ pageSize: 30 }).then((res) => {
        this.clickList = res.data.bookList.data.slice(0, 27);
        this.clickListTop = res.data.bookList.data.slice(0, 3);
        this.clickLoading = false;
      });
    },
    // 获取分类推荐
    getTypeList() {
      getTypeList().then((res) => {
        this.typeList = res.data;
        this.classLoading = false;
      });
    },
    // 最新更新上一页
    handleToLastUpdate(page) {
      getUpdateList({ pageSize: 6, page }).then((res) => {
        this.updateList = res.data.bookList.data;
      });
    },
    // 最近更新下一页
    handleToNextUpdate(page) {
      getUpdateList({ pageSize: 6, page }).then(res => {
        // console.log(res.data.bookList.data)
        this.updateList = res.data.bookList.data;
      });
    },
    // 完本小说上一页
    handleToLastOver(page) {
      getOverList({ pageSize: 18, page }).then((res) => {
        this.overListOther = res.data.bookList.data;
      });
    },
    // 完本小说下一页
    handleToNextOver(page) {
      getOverList({ pageSize: 18, page }).then((res) => {
        this.overListOther = res.data.bookList.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  background: #f4f8ff;
  .contanier {
    width: 1280px;
    margin: 0 auto;
    .recently-updated {
      width: 1200px;
      margin: 0 auto;
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .finish-book {
      width: 1200px;
      margin: 0 auto;
    }
    .classification {
      width: 1200px;
      margin: 0 auto;
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .click-leader {
      width: 1200px;
      margin: 0 auto;
      padding-bottom: 60px;
    }
  }
  .back-to {
    position: fixed;
    bottom: 100px;
    right: 100px;
    background: white;
    height: 50px;
    width: 50px;
    border-radius: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px #e5e5e5;
    z-index: 10000;
    font-weight: bold;
    cursor: pointer;
  }
  .back-to:hover {
    background: #92c8ff;
    color: #f4f8ff;
  }
}

.click-leader .big-card {
  width: 894px;
}

.fail {
  width: 1200px;
  margin: 0 auto;
  .fail-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .logo-bottom {
      font-size: 110px;
      margin-top: 20px;
      margin-bottom: 28px;
    }
  }
}
</style>
